<template>
  <div>
    <h1 ref="h1">hello! welcome study vue</h1>
    <button @click="printH1">点我输出h1</button>

    <h2 id="h2">good good study! day day up</h2>
    <button @click="printH2">点我输出h2</button>

    <MySchool ref="sch"></MySchool>
    <button @click="printSch">点我输出sch</button>

    <br>
    <button @click="printVC">点我输出vc,查看$refs里的内容</button>
  </div>
</template>
  <!-- 标签里添加了 ref属性, vue会把该标签收集在$refs对象里,-->
  <!-- 1,普通标签: 添加了ref属性,则打印的是真实dom          console.log(this.$refs.h1) -->
  <!-- 2,组件标签: 添加了ref属性,则打印的VueComponent对象   console.log(this.$refs.sch)  -->
<script>
    import MySchool from './components/MySchool.vue'
    export default {
        name:"App",
        components: {
            MySchool
        },
        methods:{
            printH1(){
                //通过ref获取Dom
                console.log(this.$refs.h1)
            },
            printH2(){
                //通过js方法获取Dom
                console.log(document.getElementById("h2"))
            },
            printSch(){
                //通过ref获取组件
                console.log(this.$refs.sch)
            },
            printVC(){
                console.log(this)
            }
        }

    }
</script>

<style>

</style>